<template>
  <div class="todo_container">
    <div class="todo_header_container">
      <!-- <div class="todo_title">我的待办</div> -->
      <el-form ref="form" :model="form" label-width="110px" class="todo_header">
        <el-form-item label="业务类型：" class="todo_content_select">
          <el-select v-model="form.type" clearable placeholder="选择业务类型" class="todo_content_select_item">
            <el-option v-for="(item, $index) in typelist" :key="$index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-divider></el-divider> -->
    <div class="todo_table_container">
      <el-table :data="this.filtedTableData" style="width:100%" max-height="800"
        :default-sort="{ prop: 'id', order: 'descending' }">
        <el-table-column prop="todoId" label="ID" min-width="20%" sortable align="center">
        </el-table-column>
        <el-table-column prop="todoType" label="业务类型" min-width="20%" align="center">
        </el-table-column>
        <el-table-column prop="todoTime" label="申请日期" sortable min-width="20%" align="center">
        </el-table-column>
        <el-table-column prop="profit" label="操作" min-width="20%" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum"
        :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total" @size-change="handleSizeChange"
        @current-change="handlePageChange" style="padding-right: 30px;" />
    </div>
  </div>
</template>

<style scoped>
.todo_container {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  justify-content: center;
  background-color: rgb(255, 255, 255);
}

.todo_header_container {
  display: flex;
}

.todo_header {
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 10px;
  margin: 0px 0px 5px 0px;
  width: 100%;
}

.todo_title {
  display: flex;
  font-size: x-large;
  align-items: flex-end;
  justify-content: center;
  width: 20%;
}

.todo_content_select {
  margin: 0 70px;
  width: 30%;
}

.todo_content_select_item {
  width: 99%;
}

.todo_table_container {
  width: 90%;
  margin: 0 auto;
}

.pagination {
  width: 100%;
  margin: 25px auto;
  /* text-align: right; */
}
</style>

<script>
import { getTodoDoneList } from '../../api/homeData';
export default {
  name: "ToDoDoneView",
  data() {
    return {
      form: {
        type: null,
      },
      tableData: [],
      typelist: [],
      //分页相关数据
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 6, // 每页多少条
        total: 0 // 总记录数
      },
      BasicDataPage: null,
      pageSizes: [6, 12],
    }
  },
  computed: {
    filtedTableData() {
      if (!this.form.type) {
        return this.getPageList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
      } else {
        return this.getPageList(this.tableData.filter((value) => {
          const typeMatch = !this.form.type || value.todoType.includes(this.form.type);
          return typeMatch;
        }), this.tablePage.pageNum, this.tablePage.pageSize)
      }
    },
    userId() {
      return localStorage.getItem("userId");
    },
  },
  methods: {
    // 分页
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      // 在此刷新数据
      this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      // 在此刷新数据
      this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
    },
    getList(data, num, size) {
      let list, start, end
      start = (num - 1) * size
      end = start + size
      list = data.filter((item, index) => {
        return index >= start && index < end
      })
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
    },
    getPageList(data, num, size) {
      this.tablePage.total = data.length
      this.BasicDataPage = this.getList(data, num, size)
      return this.BasicDataPage
    },
    //async 
    async initTableData() {
      // getTodoList(this.userId).then(res => {
      //   this.tableData = res.data.data;
      // })
      //await
      const res = await getTodoDoneList(this.userId);
      this.tableData = res.data.data;
      // 提取并去重 type 属性
      const types = new Set();
      this.tableData.forEach(item => {
        types.add(item.todoType);
      });
      // 将 Set 转换为数组，赋值给 typelist
      this.typelist = Array.from(types);
    },
    handleClick(row) {
      if (row.todoType === '用车申请部门审批') {
        this.$router.push({
          path: "/Home/AutoDepartmentApprovalDone",
          query: {
            OrderId: row.orderId,
          }
        });
      } else if (row.todoType === '用车申请综合办审批') {
        this.$router.push({
          path: "/Home/AutoGeneralApprovalDone",
          query: {
            OrderId: row.orderId,
          }
        });
      } else if (row.todoType === '用车通知') {
        this.$router.push({
          path: "/Home/AutoNoticeDone",
          query: {
            OrderId: row.orderId,
          }
        });
      } else if (row.todoType === '用车委派') {
        this.$router.push({
          path: "/Home/AutoDelegationDone",
          query: {
            OrderId: row.orderId,
          }
        });
      } else if (row.todoType === '维修申请综合办审批') {
        this.$router.push({
          path: "/Home/RepairGeneralApprovalDone",
          query: {
            OrderId: row.orderId,
          }
        });
      } else if (row.todoType === '维修通知') {
        this.$router.push({
          path: "/Home/RepairNoticeDone",
          query: {
            OrderId: row.orderId,
          }
        });
      }

    },
  },
  mounted() {
    this.initTableData();
  }
}
</script>
